<template>
  <el-container style="height: 100vh">
    <!--    头部开始-->
    <el-header class="header">
      <div style="float: left;margin-top: 5px;
      font-size: 15px;color: azure;font-family: Algerian">
        欢迎尊敬的
        <span style="color: slateblue;font-size: 30px">{{ user.username }}</span>

        <el-dropdown style="margin-left: 10px;color: azure" @command="handleCommand">
          <span class="el-dropdown-link">
            个人菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="oneself">个人信息</el-dropdown-item>
            <el-dropdown-item command="update">密码修改</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-button style="float: right;font-size: 15px;margin-top: 8px;margin-right: 12px" type="text" @click="logout">
        注销
      </el-button>

    </el-header>

    <!--    主题开始-->
    <el-container class="container">
      <!--      左侧-->
      <el-aside class="aside" width="15%">
        <Aside></Aside>
      </el-aside>
      <!--      中间-->
      <el-main class="main" style="padding: 0;">
        <div style="height: 50px;background: powderblue;">
          <el-breadcrumb separator-class="el-icon-arrow-right"
                         style="padding: 18px">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
<!--    弹出层-->
    <el-dialog
      :visible.sync="dialogVisible"
      title="个人信息"
      :before-close="closeBefore"
     >
      <el-form :model="userTwo"
               label-position="left"
               :disabled="db"
               v-if="editVisible"
               label-width="auto">
        <el-form-item label="用户名" disabled="false" required>
          <el-input v-model="userTwo.username"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="userTwo.userSex" required placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="userTwo.userAge" required autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userTwo.userPhone" required autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" >
          <el-select v-model="userTwo.userRole" required placeholder="角色" disabled>
            <el-option label="用户" value="user"></el-option>
            <el-option label="管理员" value="admin"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    <div style="margin-left: 550px;" v-if="editVisible">
      <el-button v-if="dbt" @click="exitupdate">取消</el-button>
      <el-button v-if="dbt" @click="updateFrom">确认修改</el-button>
      <el-button type="primary" @click="dialogVisible=false" v-if="!dbt">取消</el-button>
      <el-button type="primary" @click="HandupdateFrom" v-if="!dbt">修改信息</el-button>
    </div>
      <el-form v-if="updateVisible" :model="userTwo" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码" v-if="test" >
          <el-input type="password"  ref="password" v-model="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-button style="margin-left: 720px" v-if="test" type="primary" @click="checkPassword()">验证密码</el-button>
        <el-form-item label="新密码" prop="password"  v-if="!test">
          <el-input type="password" v-model="userTwo.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" v-if="!test">
          <el-input type="password" v-model="userTwo.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="!test">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </el-container>
</template>

<script>

import Aside from '@/components/Aside'
import personal from '@/utils/personal'
import { Message } from 'element-ui'
import User from '@/utils/User'

export default {
  name: 'Home',
  components: { Aside },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.userTwo.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userTwo.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      test: true,
      password: '',
      updateVisible: false,
      editVisible: false,
      dialogVisible: false,
      db: true,
      dbt: false,
      user: {
        password: ''
      },
      userTwo: {
        checkPass: '',
        password: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到15个字符之间', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeBefore () {
      this.test = true
      this.dialogVisible = false
      this.editVisible = false
      this.updateVisible = false
      this.password = ''
      this.db = true
      this.dbt = false
      this.userTwo = {}
    },
    checkPassword () {
      console.log(this.password)
      User.checkPassword(this.user.userId, this.password).then(res => {
        if (res.code === 200) {
          this.test = false
          Message.success('密码验证成功!')
        } else {
          Message.error('密码验证失败!请重试!')
          this.password = ''
        }
      })
    },
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.user.password = this.userTwo.password
          console.log(this.user)
          User.editPwd(this.user).then(() => {
            this.$message.success('修改成功!')
            this.dialogVisible = false
            this.test = true
            this.userTwo = {}
            this.password = ''
          })
        } else {
          Message.error('两次密码不一致!')
          return false
        }
      })
    },
    HandupdateFrom () {
      this.dbt = true
      this.db = false
    },
    exitupdate () {
      this.dbt = false
      this.db = true
    },
    updateFrom () {
      User.editUser(this.userTwo).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功!')
          this.dialogVisible = false
          this.user = JSON.parse(JSON.stringify(this.userTwo))
          sessionStorage.setItem('user', JSON.stringify(this.user))
          this.dbt = false
          this.db = true
        } else if (res.code === 508) {
          this.$message.warning('用户名已存在!')
        } else {
          this.$message.error('服务器错误!')
          this.dbt = false
          this.db = true
        }
      })
    },
    handleCommand (command) {
      if (command === 'oneself') {
        this.dialogVisible = true
        this.editVisible = true
        this.updateVisible = false
        this.userTwo = JSON.parse(JSON.stringify(this.user))
      } else {
        this.dialogVisible = true
        this.editVisible = false
        this.updateVisible = true
      }
    },
    logout () {
      personal.logout()
    }
  },
  mounted () {
    this.user = JSON.parse(sessionStorage.getItem('user'))
  }
}
</script>

<style scoped>
body {
  margin: 0;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.header {
  background: black;
}

.aside {
  background: black;
}
</style>
